{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>新闻专题列表 - 我们新闻视频网</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap ">
    <header>
		<div  class=" header">
 				<div class="top">
				<div class="wp">
					<div class="fl"><p>服务电话：<b>33333333</b></p></div>
					<!--登录后跳转-->
         {% if request.user.is_authenticated %}
            <div class="personal">
              <dl class="user fr">
                <dd>{{ user.username }}<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
                <dt><img width="20" height="20" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
              </dl>
              <div class="userdetail">
                <dl>
                  <dt><img width="80" height="80" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
                  <dd>
                    <h2>{{ request.user.nick_name }}</h2>
                    <p>{{ request.user.username }}</p>
                  </dd>
                </dl>
                <div class="btn">
                  <a class="personcenter fl" href="">进入个人中心</a>
                  <a class="fr" href="">退出</a>
                </div>
              </div>
            </div>
                  <a href="">
              <div class="msg-num">
                <span id="MsgNum">{{ request.user.unread_nums }}</span>
              </div>
            </a>
            {% else %}

            <a style="color:white" class="fr registerbtn" href="">注册</a>
            <a style="color:white" class="fr loginbtn" href="">登录</a>
            {% endif %}

				</div>
			</div>


            <div class="middle">
                <div class="wp">
                    <a href="{% url 'index' %}"><img class="fl" src="{% static 'images/logo.jpg' %}"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">新闻专题</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="{% static 'images/search_btn.png' %}"/>
                    </div>
                </div>
            </div>


			<nav>
				<div class="nav">
					<div class="wp">
						<ul>
							<li ><a href="{% url 'index' %}">首页</a></li>
							<li class="active">
								<a href="{% url 'news:topiclist' %}">
									新闻专题列表<img class="hot" src="{% static 'images/nav_hot.png' %}">
								</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
            
			</div>
    </header>
</section>
<!--crumbs start-->

    <section>
	<div class="wp">
		<div class="crumbs">
			<ul>
				<li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'news:topiclist' %}">新闻专题列表</a>></li>
				<li>专题详情</li>
			</ul>
		</div>
	</div>
</section>


    <section>
	<div class="wp">
		<div class="groupPurchase_detail detail">
			<div class="toppro">
				<div class="left">
					<div class="picbox">
						<div class="tb-booth tb-pic">
							<img width="440" height="445" src="{{ MEDIA_URL }}{{ topic.image }}" class="jqzoom" />
						</div>

					</div>
					<div class="des">
						<h1 title="django 从入门到精通体验开始了">{{ topic.topic_name }}</h1>
						<span class="key">{{ topic.desc }}</span>
						<div class="prize">
							<span class="fl">频道：<i class="key">{{ topic.get_category_display }}</i></span>
							<span class="fr">阅读人数：{{ topic.user_nums }}</span>
						</div>
						<ul class="parameter">
							<li><span class="pram word3">来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源：</span><span>新华社</span></li>


							<li class="piclist"><span class="pram word4">阅读用户：</span>
                                {% for  tuser in topic.get_user %}
                                    <span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ tuser.user.image }}"/></span>
                                {% endfor %}
							</li>
						</ul>
						<div class="btns">
							<div class="btn colectgroupbtn"  id="jsLeftBtn">
                                  收藏
                            </div>
                                <div class="buy btn"><a style="color: white" href="">开始阅读</a></div>
						</div>
					</div>
                    <div class="group-share-box">
                        <div class="bdsharebuttonbox"
                             data-text="django开始了"
                             data-desc="我在#慕课网#发现了"
                             data-comment=""
                             data-url="/group/groupdetail/15/">
                            <span class="fl">分享到：</span>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
                            <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                    </div>
				</div>
				<div class="right">
					<div class="head">
						<h1>新闻机构</h1>
						<p>真实迅捷，权威授权</p>
					</div>
					<div class="pic">
                        <a href="">
                            <img width="150" height="80" src="{% static 'images/2018.png' %}">
                        </a>
                    </div>
					<a href="">
                        <h2 class="center" title="新华社">新华社</h2>
                    </a>
					<div class="btn  notlogin
					     "data-favid="14" id="jsRightBtn">
                         已收藏
                    </div>
					<div class="clear">
						<ul>
                            <li>
                                <span>新 &nbsp;闻&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   50000</span>
                            </li>
                            <li>
                                <span>专 &nbsp;题&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  800</span>
                            </li>
							<li>所在地区：&nbsp;&nbsp;北京市</li>
							<li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                                &nbsp;&nbsp;
								    <img title="权威机构", src="{% static 'images/gold.png' %}"/>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
    <section>
	<div class="wp">
		<div class="list groupPurchase_detail_pro">
			<div class="left layout">
				<div class="head">
					<ul class="tab_header">
						<li class="active">专题详情</li>
					</ul>
				</div>
				<div class="tab_cont tab_cont1">
                    
					<p>&nbsp; &nbsp;{{ topic.detail }} </p>
                    
				</div>
				<div class="tab_cont tab_cont2" >
					<div class="comment">
						<div class="comenlist">

	                    </div>
					</div>
				</div>
			</div>
			<div class="right layout">
				<div class="head">相关专题推荐</div>
                <div class="group_recommend">
                    {% for relate_topic in relate_topics %}
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ relate_topic.image }}"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> {{ relate_topic.topic_name }}</h2></a>
                                <span class="fl">频道：<i class="key">{{ relate_topic.get_category_display }}</i></span>
                            </dd>
                        </dl>
                    {% endfor %}
                    


                </div>
			</div>
		</div>
	</div>
</section>

<footer>
		<div class="footer">
			<div class="wp">
				<ul class="cont">
					<li class="logo"><a href=""><img src="../images/footlogo.png"/></a></li>
					<li class="code"><img src="../images/code.jpg"/><p class="center">扫描关注微信</p></li>
					<li class="third"><img class="fl" src="../images/tell.png"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li>
				</ul>

			</div>
			<p class="line"></p>
			<div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号：蜀ICP备xxxxx号-1</span>
			</div>
		</div>
	</footer>

<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="../js/selectUi.js" type='text/javascript'></script>
<script src="../js/deco-common.js" type='text/javascript'></script>
<script type="text/javascript" src="../js/plugins/laydate/laydate.js"></script>
<script src="../js/plugins/layer/layer.js"></script>
<script src="../js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="../js/unslider.js" type="text/javascript"></script>
<script src="../js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="../js/deco-common.js"  type="text/javascript"></script>

<script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type){
    $.ajax({
        cache: false,
        type: "POST",
        url:"/news/add_fav/",
        data:{'fav_id':fav_id, 'fav_type':fav_type},
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
        },
        success: function(data) {
            if(data.status == 'fail'){
                if(data.msg == '用户未登录'){
                    window.location.href="login.html";
                }else{
                    alert(data.msg)
                }

            }else if(data.status == 'success'){
                current_elem.text(data.msg)
            }
        },
    });
}

$('#jsLeftBtn').on('click', function(){
    add_fav($(this), {{ topic.id }}, 1);
});

$('#jsRightBtn').on('click', function(){
    add_fav($(this), 2, 2);
});


</script>


</body>
</html>
